<template>
  <div class="newdetail">
    <Header></Header>
    <div class="newdetail2">
      <div class="fa-hacker-news">
        <img src="../assets/img/back/news.png" style="width: 1200px" alt="">
      </div>
      <div>
        <h1 class="news_title">{{news_info.title}}</h1>
        <hr>
        <div class="news_time">{{news_info.create_time.slice(0,10)}}</div>
        <div class="news_content">{{news_info.content}}</div>

      </div>

      <div style="clear: both"></div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "NewDetail",
  data() {
    return {
      news_id: 0,
      news_info:{

      }
    }
  },
  components: {
    Header,
    Footer,

  },
  created() {
    this.get_news_id(); // 从上个页面传入
    this.get_news_data(); //根据id获取课程详情
  },
  methods: {
    get_news_id() {
      // 获取地址栏上面的课程ID
      this.news_id = this.$route.params.pk
      if (this.news_id < 1) {
        let _this = this;
        _this.$alert("对不起，当前新闻不存在！", "警告", {
          callback() {
            _this.$router.go(-1);
          }
        });
      }
    },
    get_news_data() {
      // ajax请求课程信息
      this.$http.get(`${this.$settings.base_url}new/new/${this.news_id}/`).then(response => {
        this.news_info = response.data;
        console.log(this.news_info)
      }).catch(() => {
        this.$message({
          message: "对不起，访问页面出错！请联系客服工作人员！"
        });
      })
    },
  }
}
</script>

<style scoped>
.newdetail2 {
  width: 1200px;
  margin: 0 auto;
}
.news_content{
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 50px;
}
.news_title{
  width: 800px;
  margin: 0 auto;
  padding-top: 20px;
    text-align: center;
}
.news_time{
  width: 1000px;
  margin: 0 auto;
  text-align: center;
}
</style>